<template>
  <el-dialog
    title='查看模型'
    :close-on-click-modal="false"
    :visible.sync="visible">
    <template>
      <el-container style="height:100%;min-height:50vh;" direction="vertical">
        <vue-bpmn
          :url="dataForm.url"
          v-on:error="handleError"
          v-on:shown="handleShown"
        ></vue-bpmn>
      </el-container>
    </template>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import vueBpmn from '@/components/bpmnComponents/bpmview.vue'
  export default {
    components: {
      vueBpmn
    },
    data () {
      return {
        visible: false,
        dataForm: {
          url: ''
        }
      }
    },
    methods: {
      handleError (err) {
        console.error('failed to show diagram', err)
      },
      handleShown () {
        console.log('diagram shown')
      },
      init (id) {
        this.visible = true
        this.dataForm.url = `/flow/deployment/view/${id}`
      }
    }
  }
</script>
